
<style>
.delete {
	background: url('../../recursos/imagenes/delete.png');
	background-repeat: no-repeat;
}

.agrego {
	background: url('../../recursos/imagenes/irc-join.png');
	background-repeat: no-repeat;
}

fieldset {
	border: 1px solid #781351;
	background: #F7F7F7;
}

legend {
	color: #fff;
	background: #0978EA;
	border: 1px solid #781351;
	padding: 2px 6px
}

#container1 {
    float:left;
    width:100%;
}
#grid_moto {
    float:left;
    width:40%;
   // background:red;
}
#motoImg {
    float:left;
    width:40%;
    margin-top:-30px;
    margin-left:130px;
    //background:yellow;
}
</style>

<script type="text/javascript">
			
			function enviarDatosMotor(){
				 var parametros = $("#motoForm").serialize();
				    $.ajax({
				       type:'POST',
				       dataType:'JSON',
				       data:parametros,
				       url: "${pageContext.request.contextPath}/motoAcuatica.action?vmotor=1",
				       success:function(responseText){
				    	   
				    	   var data2 = eval(responseText);//json_parse(responseText);
				    	  	                  
				           // alert(data);
				    	   $("#oper").val("edit");
				  				$("#idMoto").val(data2.idMoto);
				  				$("#drop_zone_1").show();
							  				
				  				if(motoControlador==3){
				  					$("#moto_accordion").accordion('activate',4);
				  					motoControlador++;
				  				 }
								
				  				if(motoControlador==2){
				  					$("#moto_accordion").accordion('activate',3);
				  					motoControlador++;
				  				 }
				  				
				  				 if(motoControlador==1){
				  		          $("#moto_accordion").accordion('activate',2);				   					
				  					motoControlador++;
				  				 }			  			
				           }
				    });
				
			}
			
			function motoEspecialFinal(){  
			    //envio el formulario utilizando ajax
			    var parametros = $("#motoForm").serialize();
			    $.ajax({
			       type:'POST',
			       dataType:'JSON',
			       data:parametros,
			       url: "${pageContext.request.contextPath}/motoAcuatica.action?final=1",
			       success:function(responseText){
			    	   
			    	   var data2 = eval(responseText);//json_parse(responseText);
			    	  	                  
			           // alert(data);
			    	   $("#oper").val("edit");
			  				$("#idMoto").val(data2.idMoto);
			  				$("#drop_zone_1").show();
						  				
			  				if(motoControlador==3){
			  					$("#moto_accordion").accordion('activate',4);
			  					motoControlador++;
			  				 }
							
			  				if(motoControlador==2){
			  					$("#moto_accordion").accordion('activate',3);
			  					motoControlador++;
			  				 }
			  				
			  				 if(motoControlador==1){
			  		          $("#moto_accordion").accordion('activate',2);				   					
			  					motoControlador++;
			  				 }			  			
			           }
			    });
			}
			
			
			function enviarFormMoto(idFormulario){
			    $(idFormulario).submit(function (){
			        if($("#motoForm").valid()){
			            //envio el formulario utilizando ajax
			            var parametros = $(this).serialize();
			            $.ajax({
			               type:'POST',
			               dataType:'JSON',
			               data:parametros,
			               url: "${pageContext.request.contextPath}/motoAcuatica.action",
			               success:function(responseText){
			            	   
			            	   var data2 = eval(responseText);//json_parse(responseText);
			            	  
			                   // alert(data);
			            	   $("#oper").val("edit");
				   				$("#idMoto").val(data2.idMoto);				   				
				   				$("#drop_zone_1").show();
				   				
				   				
				   				if(motoControlador==4){
				   					$("#moto_accordion").accordion('activate',5);
				   					motoControlador++;
				   				 }
				   				
				   				if(motoControlador==3){
				   					$("#moto_accordion").accordion('activate',4);
				   					motoControlador++;
				   				 }
								
				   				if(motoControlador==2){
				   					$("#moto_accordion").accordion('activate',3);
				   					motoControlador++;
				   				 }
				   				
				   				 if(motoControlador==1){
				   		          $("#moto_accordion").accordion('activate',2);					   					
				   					motoControlador++;
				   					
				   				 }
				   				
			                   }
			            });
			        }else{			        	
			        	$("#moto_accordion").accordion('activate',1);
			         }
			        opcionPres='nin';
			        return false;
			    });
				
				}

			
			$(function () {
				// $('#file_upload').fileUploadUI();
			    var initFileUpload = function (suffix) {
			        $('#file_upload').fileUploadUI({
			            namespace: 'upload',
			            fileInputFilter: '#upload' ,
			            dropZone: $('#drop_zone_' + suffix),
			           // uploadTable: $('#files_' + suffix),
			           // downloadTable: $('#files_' + suffix),

			            buildDownloadRow: function (file) {
			                guardarPathMoto($("#idMoto").val(),file.name);
			                return $('<tr><td>' + file.name + '<\/td><\/tr>');
			            }
			        });
			    };
			    initFileUpload(1);
			});
			

			
			
			function guardarPathMoto(idMoto,nombreArchivo){ 
				$.ajax({
				    type: "POST",                           
				    url: "${pageContext.request.contextPath}/motoAcuatica.action",
				    data: {oper:"pathMoto",idMoto:idMoto,nomArchivo:nombreArchivo},                                
				    success: function(data){                            
				    	alert("Guarde");
				    }                         
				    });
			}
			

			
				var motoPorCiento =0;
				var motoControlador=0;
				
				$(document).ready(function(){
					
					
					$("#drop_zone_1").hide();
					ponerTitulo("Registro Motos Acuáticas");
					
					gridMotosAcuaticas();
					gridPersonas();
					
					$("#motoCont4").button();
					$("#motoCont3").button();	
					$("#motoCont2").button();
					$("#motoCont1").button();
					$("#motoCont0").button();
					
					$("#motoRegre4").button();
					$("#motoRegre3").button();
					$("#motoRegre2").button();
					$("#motoRegre1").button();
					
					$("#upload").button();
					
					$( "#fechaResolucionDEMoto" ).datepicker();
					$( "#fechaNotificacionMoto" ).datepicker();
					$( "#fechaExpiracionMoto" ).datepicker();
					$( "#fechaEmisionMoto" ).datepicker();
					$( "#fechaResolucionDEMoto" ).datepicker("option", "dateFormat", 'dd/mm/yy');
					$( "#fechaNotificacionMoto" ).datepicker("option", "dateFormat", 'dd/mm/yy');
					$( "#fechaExpiracionMoto" ).datepicker("option", "dateFormat", 'dd/mm/yy');
					$( "#fechaEmisionMoto" ).datepicker("option", "dateFormat", 'dd/mm/yy');
								
					$( "#moto_accordion" ).accordion();
					cargarCombo('${pageContext.request.contextPath}/combo.action','unidadPotencia','#idUnidadPotencia');
					desactivarAcordiones("#motoDatosGenerales");
					desactivarAcordiones("#datosGeneralesMoto");					
					desactivarAcordiones("#propietariosMoto");
					desactivarAcordiones("#datosMotorMoto");
					desactivarAcordiones("#datosResolucionMoto");
					
					
					enviarFormMoto("#motoForm");								
					$("#idUnidadPotencia").val("2");
					
					$("#idMotoGral").css("height",'320');
				//	$("span").removeClass("ui-icon ui-icon-triangle-1-e");
					
				});
				
				
				function desactivarAcordiones(id){
					   //alert(id);
					  $(id).click(function(event){			                 
			                  event.preventDefault();
			                  return false;
			           });
				}
				
				
				
				
				function activarLlamada(id){
					//$("#"+id).trigger("click");
					motoControlador--;
					  $("#moto_accordion").accordion('activate',id);
				}
				
				
				function gridPersonas(){
					
					jQuery("#sPersona").jqGrid({ 
					url:'${pageContext.request.contextPath}/persona.action?oper=personaAux',
					editurl:'${pageContext.request.contextPath}/persona.action', 
					datatype: "json", 
					height: 'auto', width: 'auto', 
					colModel:[ 
								{name:'idPersona',index:'idPersona',hidden:true, width:150, label:'Id Persona', sortable:true, editable:true},
								{name:'nombrePersona',index:'nombrePersona', width:250, label:'Nombre', editable:true, edittype:"text"},
								{name:'dui',index:'dui', width:150, label:'Documento', editable:true, edittype:"text"}
							], 
					rowNum:5, rowList:[5,10,15], 
					mtype: "POST", 
					rownumbers: true, rownumWidth: 40,
					onSelectRow:function(rowid,status){						
						if(($("#motoTotal").val()/1)<100){
							crearFila(rowid);
						}else{
							alert("El porcentaje no puede exceder el 100%");
						}
						
					}, 
					gridview: true, 
					pager: '#sPagerPersona', 
					sortname: 'idPersona', viewrecords: true, sortorder: "asc", 
					caption: "Personas" 
				}).navGrid('#sPagerPersona', { edit:false,add:false,del:false,search:false,refresh:true }); 
					jQuery("#sPersona").jqGrid('filterToolbar',{stringResult: false,searchOnEnter : true}); 
				}


				function cargarDataMotoAcuatica(rowId){
								
					  $.ajax({
					        url:"${pageContext.request.contextPath}/motoAcuatica.action",
					        data:{oper:"datosMotoAcuatica",idMotoAcuatica:rowId},
					        success:function(responseText, statusText) {
					        	
					        	var decs = eval(responseText);
					        	 
					        	  //datos generales					        	  					        	 
					        	  $("#numeroOficialMoto").val(decs.motoAcuatica.numeroOficial);
					        	  $("#colorMoto").val(decs.motoAcuatica.color);
					        	  $("#fotografia").val(decs.motoAcuatica.fotografia);
					        	  $("#marcaChasisMoto").val(decs.motoAcuatica.marcaChasis);
					        	  $("#modeloChasisMoto").val(decs.motoAcuatica.modeloChasis);
					        	  $("#numeroSerieChasisMoto").val(decs.motoAcuatica.noSerieChasis);
					        	  $("#ubicacionFisicaMoto").val(decs.motoAcuatica.ubicacionFisica);
					        	 
					        	  
					        	  //propietarios
					        	  $("#porPer").html("");
					        	    $("#porPer").append(decs.duennos);		        	  				
		        	 				 // var url = $("#sMotorMotoAcuatica").getGridParam("url");
		        	 				if(decs.motoAcuatica.idMotor!= null){ 
						        	    //Datos Motor
						        	    $("#noSerieMotor").val(decs.motoAcuatica.idMotor.noSerie);
						        	    $("#marcaMotorMoto").val(decs.motoAcuatica.idMotor.marcaMotorMoto);
						        	    $("#modeloMotorMoto").val(decs.motoAcuatica.idMotor.modeloMotorMoto);
						        	    $("#magnitudPotenciaMotor").val(decs.motoAcuatica.idMotor.magnitudPotencia);
						        	    $("#idUnidadPotencia").val(decs.motoAcuatica.idMotor.idUnidadPotencia);
		        	 				}
					        	 //Datos Resolucion
					        	 // $("#fechaResolucionDEMoto").val(decs.fechaResolucionDE);
					        	  //$("#fechaNotificacionMoto").val(decs.fechaNotificacion);
					        	  //$("#fechaEmisionMoto").val(decs.fechaEmision);
					        	  //$("#fechaExpiracionMoto").val(decs.fechaExpiracion);
					        	  //$("#resolucionDEMoto").val(decs.motoAcuatica.resolucionDE);
					        	  
					        	  
					        	  $("#idMoto").val(decs.motoAcuatica.idMotoAcuatica);					        	  
					        	  $("#oper").val("edit");					        	  
					        	  $("#contador").val(decs.conta);
					        	  $("#motoImg").html("");
					        	  $("#motoImg").html("<img style='margin-top:10%;margin-left:30%' width='250' height='250' src='${pageContext.request.contextPath}/imagenes/"+decs.motoAcuatica.fotografia+"'></img>");
					        	 // var url = $("#sMotoAcuatica").getGridParam("url");
					        	 // alert(url);
					        	  //url = url + "&idBuque="+$("#idBuque").val();
					        	  //$("#sMotorBuque").setGridParam("url",url);
					        	  
					        	  $("#motoTotal").val(decs.total);
								  if((decs.total/1)==100)
					        	  	$("#motoCont2").show();
								  else
									  $("#motoCont2").hide();
					        	  
					        },
					        dataType:'JSON'
					    });
				}

				
				
				function gridMotosAcuaticas(){
					
					jQuery("#sMotoAcuatica").jqGrid({ 
					url:'${pageContext.request.contextPath}/motoAcuatica.action?oper=cargarMotoAcuatica',
					//editurl:'${pageContext.request.contextPath}/motoAcuatica.action', 
					data : {idMoto:$("#idMotoAcuatica").val()},
					datatype: "json", 
					height: 'auto', width: 'auto', 
					colModel:[ 
								{name:'idMotoAcuatica',index:'idMotoAcuatica',hidden:true, width:150, label:'Id Moto Acuatica', sortable:true, editable:true},
								{name:'marcaChasis',index:'marcaChasis', width:250, label:'Marca Chasis', editable:true, edittype:"text"},
								{name:'numeroOficial',index:'numeroOficial', width:150, label:'Numero Oficial', editable:true, edittype:"text"}
							], 
							rowNum:5, rowList:[5,10,15], 
					mtype: "POST", 
					rownumbers: true, rownumWidth: 40,
					onSelectRow:function(rowid,status){
						cargarDataMotoAcuatica(rowid);
						$("#drop_zone_1").show();
						
						
					}, 
					gridview: true, 
					pager: '#sPagersMotoAcuatica', 
					sortname: 'idMotoAcuatica', viewrecords: true, sortorder: "asc", 
					caption: "Motos Acuaticas" 
				}).navGrid('#sPagersMotoAcuatica', { edit:false,add:false,del:false,search:false,refresh:true }); 
					jQuery("#sMotoAcuatica").jqGrid('filterToolbar',{stringResult: false,searchOnEnter : true}); 
			}
				
				
				
				function validarPorCiento(idInput){
					temporal = 0;
					temporal = motoPorCiento + ($("#porcentajeVal"+idInput).val()/1);
					if(temporal>100){
						//buquePorCiento = buquePorCiento - ($("#porcentajeVal"+idInput).val()/1);	
						alert("El porcentaje no puede exceder el 100%");
					}else{
						$("#bqBor"+idInput).show();
						motoPorCiento = temporal;
						$("#nombreVal"+idInput).attr("readonly","readonly");
						$("#porcentajeVal"+idInput).attr("readonly","readonly");
						$("#motoTotal").val(motoPorCiento);
						$("#embAdd"+idInput).hide();
					}
					if(temporal==100){
						$("#motoCont2").show();
					}
				}
				
				
				function eliminarDuenno(idFila,idPersona,idMoto){
					$.ajax({
					    type: "POST",                           
					    url: "${pageContext.request.contextPath}/motoAcuatica.action",
					    data: {oper:"eliminarDuenos",idPersona:idPersona,idMoto:idMoto},                                
					    success: function(data){
					    	motoPorCiento = ($("#motoTotal").val()/1) - ($("#porcentajeVal"+idFila).val()/1);
					    	//motoPorCiento = motoPorCiento - ($("#porcentajeVal"+idFila).val()/1);
							$("#motoTotal").val(motoPorCiento);
							$("#tr"+idFila).remove();
							
							if($("#porPer tr").length>0){
								$("#motoCont2").hide();
							}else{
								$("#motoCont2").show();
							}
					    }                         
					    });
				}
				
				

				
				function crearFila(rowid){
					var conta = ($("#contador").val()/1) + 1;
					var html = "<tr id='tr"+conta+"'> ";
					html  = html + "<td><input type='hidden' name='hdVal"+conta+"' id='hdVal"+conta+"' value='"+rowid+"'> </td>";		 
					html  = html + "<td><input type='text' name='nombreVal"+conta+"' id='nombreVal"+conta+"'> </td>";
					html  = html + "<td><input type='text' name='porcentajeVal"+conta+"' id='porcentajeVal"+conta+"'> </td>";
					html  = html + "<td><input id='embAdd"+conta+"'  class='agrego' type='button' onclick='javascript:validarPorCiento("+conta+")'></td>";									
					html  = html + "<td><input type='button' id='bqBor"+conta+"' class='delete' onclick='javascript:eliminarFila("+conta+")'></td>";
					html  = html + "</tr>";
					$("#porPer").append(html);
					$("#contador").val(conta);
					$("#bqBor"+conta).hide();
					var nombreP= jQuery("#sPersona").getCell(rowid,"nombrePersona");
					$("#nombreVal"+conta).val(nombreP);
					
					if($("#porPer tr").length>0){
						$("#motoCont2").hide();
					}else{
						$("#motoCont2").show();
					}
				}
				
			
				
				function eliminarFila(idFila){
					//var conta = ($("#contador").val()/1) - 1;
					motoPorCiento = motoPorCiento - ($("#porcentajeVal"+idFila).val()/1);
					$("#motoTotal").val(motoPorCiento);
					$("#tr"+idFila).remove();
				
					if($("#porPer tr").length>0){
						$("#motoCont2").hide();
					}else{
						$("#motoCont2").show();
					}
				}

										
</script>




<form class="ninguna" id="motoForm" name="motoForm" action="motoAcuatica.action">
<div id="moto_accordion">

<!-- ------------------------------------------------------------------------------------------ -->
	<h3><a id="motoDatosGenerales"  href="#">Buscar Moto Acuatica</a></h3>
	<div id="idMotoGral" >
<!-- ------------------------------------------------------------------------------------------ -->

	<fieldset ><legend>Indicacion</legend>
	* Si es un nuevo registro no es necesario que seleccione una Moto Acuatica
	</fieldset>
	<div id="container1">	
		<div id="grid_moto">			
			<table id="sMotoAcuatica"></table>		
			<div id="sPagersMotoAcuatica"  style="text-align:center;"></div>
						
			<input type="button" onclick="javascript: $('#moto_accordion').accordion('activate',1);motoControlador++;" id="motoCont0" value="Continuar>>">		
		
		</div>
		<div id="motoImg" class="columna_derecha"></div>		
	</div>
	</div>
<!-- --------------------------------------------------------------------------------------------- -->
	<h3><a id="datosGeneralesMoto" href="#">Datos Generales</a></h3>
<!-- ---------------------------------------------------------------------------------------------- -->	
	
	<div style="height: 700px;">
	
		<input type="button" onclick="javascript:activarLlamada(0)"
		  id="motoRegre1" value="<<Regresar">
        
        <table border="1">          
		    <tr></tr>
		    <tr></tr>
		    <tr>
		         <td>Numero Oficial: </td>
		         <td><input type="text"  name="numeroOficialMoto" id="numeroOficialMoto" class="required" maxlength="20"/> </td>
		         
		    </tr>         
		    <tr>
		         <td>Color: </td>
		         <td><input  type="text"  name="colorMoto" id="colorMoto" maxlength="50"/> </td>            
		    </tr>
		    <tr>
		         <td>Marca Chasis: </td>
		         <td><input  type="text" name="marcaChasisMoto" id="marcaChasisMoto"  class="required" maxlength="50"/> </td> 
		    </tr>
		    <tr>
   	             <td>Modelo Chasis: </td>
   	             <td><input type="text" name="modeloChasisMoto" id="modeloChasisMoto"  class="required" maxlength="50" /> </td>   
		    </tr>
		    <tr>
			     <td>Numero de Serie: </td>
			     <td><input type="text" name="numeroSerieChasisMoto" id="numeroSerieChasisMoto"  class="required" maxlength="50"/> </td>          
		    </tr>
		    <tr>           
		         <td style="vertical-align:middle">Ubicacion Fisica: </td>
		         <td> <textarea name="ubicacionFisicaMoto" id="ubicacionFisicaMoto" cols="28" rows="2"></textarea> </td>
		    </tr>          
         </table>
                       
            <input type="submit" value="Continuar>>" id="motoCont1">          
	</div>
	
	
	<!-- ---------------------------------------------------------------------------------------------------------------------------------- -->
	<h3><a id="propietariosMoto" href="#">Propietarios</a></h3>
	<!------------------------------------------------------------------------------------------------------------------------------------- -->
	
	
		<div>
		<input type="button" onclick="javascript:activarLlamada(1)" id="motoRegre2" value="<<Regresar">
	<table>
		<tr><td>
			<table id="sPersona" cellpadding="0" cellspacing="0"></table> 
			<div id="sPagerPersona"  style="text-align:center;"></div>
		</td>
		<td>
			<table id="porPer">			
			</table>
		</td>
		</tr>
		<tr>
		<td>
			Total : <input type="text" id = "motoTotal" readonly/>
		</td>
		</tr>
	</table>
			
		<input type="submit" id="motoCont2" value="Continuar>>" >
		
	</div>
	
	<!-- ------------------------------------------------------------------------------------------------------------------------------------- -->		
	<h3><a id="datosMotorMoto" href="#">Datos Motor</a></h3>	
	<!-- -------------------------------------------------------------------------------------------------------------------------------------- -->
	
	<div>
		<input type="button" onclick="javascript:activarLlamada(2)" id="motoRegre3" value="<<Regresar">
        <table align="center">
          <tr>
            <td>Numero de Serie: </td>
            <td><input type="text" name="noSerieMotor" id="noSerieMotor"  maxlength="50"/> </td>
          </tr>
          <tr>
            <td>Marca Motor: </td>
            <td><input type="text" name="marcaMotorMoto" id="marcaMotorMoto" maxlength="50" /> </td>
          </tr>
          <tr>
            <td>Modelo Motor: </td>
            <td><input type="text" name="modeloMotorMoto"   id="modeloMotorMoto"  maxlength="50"/> </td>
          </tr>
          <tr>
	          <td>Potencia: </td>
	          <td><input  type="text" name="magnitudPotenciaMotor" id="magnitudPotenciaMotor" class="number" /> </td>
	          <td><select id="idUnidadPotencia" name="idUnidadPotencia"></select></td>                       
          </tr>
          
          <tr>
            <td>
            <input type="button"  id="motoCont3" value="Continuar>>"  onclick="javascript:enviarDatosMotor()">            
            </td>            	            
          </tr>
        </table>
	</div>
	<!-- ------------------------------------------------------------------------------------------------------------------------------------ -->
	<h3><a id="datosResolucionMoto" href="#">Datos Resolucion</a></h3>
	<!-- ------------------------------------------------------------------------------------------------------------------------------------ -->
	<div>
    	<input type="button" onclick="javascript:activarLlamada(3)" id="motoRegre4" value="<<Regresar">
        <table width="477" border="0" align="center">
        
              <tr>
		              <td>Estado:</td>
				    	<td><select name="estado" id="estado">
									<option value="I">Inscrito</option>
									<option value="B">Baja de Bandera</option>
						</select>
			  </td>
			   	                           
              </tr>
              <tr>
                <td >Fecha de Resolucion de Director Ejecutivo: </td>
                <td ><input type="text" name="fechaResolucionDEMoto" id="fechaResolucionDEMoto" /> </td>
              </tr>   
               <tr>
                <td width="122">Fecha de Notificacion : </td>
                <td width="345"><input type="text" name="fechaNotificacionMoto" id="fechaNotificacionMoto" /> </td>
              </tr>   
              <tr>
                <td width="122">Fecha de Emision : </td>
                <td width="345"><input type="text" name="fechaEmisionMoto" id="fechaEmisionMoto" /> </td>
              </tr>  
              <tr>
                <td width="122">Fecha de Expiracion : </td>
                <td width="345"><input type="text" name="fechaExpiracionMoto" id="fechaExpiracionMoto" /> </td>
              </tr>    
              <tr>
                <td style="vertical-align:middle" >Resolucion de Director Ejecutivo: </td>
                 <td> <input type="text" name="resolucionDEMoto"  id="resolucionDEMoto"> </td>   
              </tr>
                            
         
          </table>
          	<input type="button" value="Finalizar" id="motoCont4" onclick="javascript:motoEspecialFinal()">
			
</div>
</div>
<input type="hidden" id="contador" name="contador" value="0">
<input type="hidden" id="oper" name="oper" value="add">
<input type="hidden" id="idMoto" name="idMoto" value="0">
</form>

<form id="file_upload" action="archBuq.action" method="POST" enctype="multipart/form-data">
<div id="drop_zone_1">
        <input id="upload" type="file" name="upload" multiple>
        <div> Subir Imagen</div>
    </div>
</form>